import 'package:ladder_cash/app/app.dart';
import 'package:ladder_cash/app/key_mix.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:ladder_cash/app/page/component/decoration_bg.dart';
import 'package:ladder_cash/app/page/order/order_logic.dart';
import 'package:liuxlcommon/lget/lget.dart';
import 'package:liuxlcommon/util/string_utils.dart';
import 'package:liuxlcommon/view/loading_view.dart';
import 'package:liuxlcommon/view/lxl_widget.dart';
import 'package:liuxlcommon/view/my_box.dart';
import 'package:liuxlcommon/view/my_style.dart';
import 'package:ladder_cash/app/router_manage.dart';
import 'package:ladder_cash/app/page/home/home_listener.dart';
import 'package:ladder_cash/app/page/home/home_logic.dart';
import 'package:ladder_cash/generated/assets.dart' as myAssets;
import 'package:ladder_cash/generated/l10n.dart';
import 'package:ladder_cash/value/app_colors.dart';
import 'package:ladder_cash/value/app_const.dart';
import '../../../gen/assets.gen.dart';
import '../component/base_page_bg.dart';
import '../component/common.dart';
import '../component/nav_item.dart';
import 'mine_logic.dart';

class MinePage extends StatefulWidget {
  final Function changeIndex;
  const MinePage({super.key, required this.changeIndex});
  @override
  _MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage>
    with AutomaticKeepAliveClientMixin, HomeListener {
  final logic = Get.put(MineLogic());
  final GlobalKey<RefreshIndicatorState> _indicatorKey =
      GlobalKey<RefreshIndicatorState>();

  @override
  void initState() {
    super.initState();
    Get.find<HomeLogic>().mapHomeListener["mine"] = this;
    onHomePageChanged(1);
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<MineLogic>(
      builder: (l) => RefreshIndicator(
          key: _indicatorKey,
          onRefresh: () async => await logic.getMineMenus(refresh: true),
          color: Colors.white,
          child: pageDetail()),
    );
  }

  Widget pageDetail() {
    return getBasePageBg(
        child: LColumn.eazy([
      getTabBar(title: S.current.personalCenter),
      topBox,
      10.lsh,
      Expanded(
          child: ListView(
        padding: EdgeInsets.only(left: 15.w, right: 15.w),
        children: bodyList,
      ))
    ]));
  }


  get topBox => Container(
      padding: EdgeInsets.all(16.w),
      width: 351.w,
      height: 177.w,
      decoration:
          BoxDecoration(image: getDecorationBg(Assets.home.home9527Bg.path)),
      child: Column(
        children: [
          Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                LImage.easy(myAssets.Assets.molopNewMeh, 58.w, 52.w, 16.w),
                16.lsw,
                LText.easy(
                    StringUtils().phoneHiding(App.userInfoModel.username),
                    20.sp,
                    fw7,
                    Colors.black),
              ]),
          Container(
            padding: EdgeInsets.all(16.w),
            height: 72.w,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(8))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: List.generate(logic.orderList.length, (index) {
                return getNavItem(
                  callback: (){
                    OrderLogic.tabIndex = index;
                    widget.changeIndex(1);
                  },
                    img: logic.orderList[index]['img'],
                    title: logic.orderList[index]['title']);
              }),
            ),
          )
        ],
      ));

  // Widget get zfxBox => Transform.rotate(
  //     angle: 45 * 3.1415927 / 180, // 将角度转换为弧度
  //     child: Container(
  //       width: 22.w,
  //       height: 22.w,
  //       color: logic.isVerify ? const Color(0xFF1CF19A) : const Color(0xFFF8E678),
  //     ));

  List<Widget> get bodyList => [LContainer(child: menusBox)];

  Widget get menusBox => Container(
        width: 351.w,
        height: 240.w,
        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 20.w),
        decoration: BoxDecoration(image: getDecorationBg(Assets.my.my2Bg.path)),
        child: LoadingView(
          datas: logic.mineMenus,
          future: () => logic.getMineMenus(),
          body: () => getMenuList(logic.mineMenus ?? []),
          onSuccess: () {
            if (logic.mineMenus != null) logic.update();
          },
        ),
      );
  getMenuList(List menus) {
    return Wrap(
        spacing: 10.w, // 水平间距
        runSpacing: 0.0, // 垂直间距
        children: logic.mineMenus!.map((item) {
          return InkWell(
            onTap: () {
              RouterManage.to(item['url'.hx]);
            },
            child: SizedBox(
                width: 95.w,
                height: 100.w,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      // width: 95.w,
                      // height: 55.w,
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(8)),
                         ),
                      child: Image.network(
                        item['icon'.hx] ?? '',
                        width: 30.w,
                        height: 30.w,
                        fit: BoxFit.fill,
                      ),
                    ),
                    middleFont(item['title'.hx] ?? '',
                        fontsize: 14.sp,
                        fontWeight: FontWeight.w400,
                        textAlign: TextAlign.center)
                  ],
                )),
          );
        }).toList());
  }

  // menuItem(data) => LRow(
  //       lStyle: menuItemSty,
  //       children: [
  //         LImage.easy(data['icon'.hx] ?? '', 19.w, 19.w),
  //         12.lsw,
  //         LText.easy(data['title'.hx] ?? '', 15.sp, FontWeight.w400,
  //                 AppColors.textColor)
  //             .flex(1),
  //         LImage.easy(myAssets.Assets.molopNewArrowRight, 7.w, 13.w)
  //       ],
  //       onTap: () {
  //         RouterManage.to(data['url'.hx]);
  //       },
  //     );

  get menuItemSty => LStyle(css: '''
height: 50px;
background: #FFFFFF;
border-radius: 10px ;
margin-bottom:16px;   ''');

  // get tabV => LRow.eazy([
  //       for (int i = 0; i < 3; i++)
  //         itemV(
  //             [Assets.pcMo1, Assets.pcMo2, Assets.pcMo3][i],
  //             [
  //               App.localeEn ? 'In progress' : 'Menerapkan',
  //               App.localeEn ? 'Repayment' : "Pembayaran",
  //               App.localeEn ? 'Finished' : 'Dilunasi'
  //             ][i], () {
  //           var homeLogic = Get.find<HomeLogic>();
  //           OrderLogic.tabIndex = i + 1;
  //           homeLogic.currentIndex = 1;
  //           homeLogic.pageController.jumpToPage(1);
  //           homeLogic.update();
  //         })
  //     ]);
  //
  // itemV(url, title, onclick) => LColumn(
  //         lStyle: LStyle(
  //             flex: 1,
  //             height: 83.w,
  //             mainAxisAlignment: MainAxisAlignment.center),
  //         onTap: onclick,
  //         children: [
  //           LImage.easy(url, 44.w, 44.w),
  //           LSizeBoxHeight(7.w),
  //           LText(title).css('color: #015124;')
  //         ]);

  @override
  void dispose() {
    Get.delete<MineLogic>();
    super.dispose();
  }

  @override
  bool get wantKeepAlive => true;

  @override
  void onHomePageChanged(position) {
    if (position != 1) return;
    //已经加载完成，需要做刷新
    if (logic.mineMenus != null) {
      _indicatorKey.currentState?.show();
    }
  }
}
